30天分享(16) - HTML5 拖曳與置放
HTML5 支援物件的拖曳與置放，使檔案或圖片能從一個位置拖曳到另一個位置，
程式碼如下 :
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
<script> 裡面程式碼為拖曳置放固定的函式方法，裡面包含了寫入資料庫檔案的類別，
<script> 裡的 ev 是可以自訂的函式名稱， 圖片與 div 裡的屬性 event 則不能變動，它是內定的函式。
準備好 javascript 後，只要將 <script> 裡的函式名稱套用到 div 與 圖片的屬性裡就可以執行動作，相對的屬性要對應相對應的函式。
iThome鐵人賽
看影片追技術